<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <div>
            <el-form :model="searchFormData" label-width="80px" style="width:100%">
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="name" label="产品名称">
                            <el-input v-model="searchFormData.name" placeholder="请输入产品名称" style="width:80%;" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="modelName" label="所属型号">
                            <el-input v-model="searchFormData.modelName" placeholder="请输入所属型号" style="width:80%;" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="text-align:right;padding-right:30px;">
                        <el-button type="primary" @click="searchData" size="medium">查询</el-button>
                        <el-button type="primary" plain @click="reset" size="medium">重置</el-button>
                        <el-button type="primary" @click="historyClick" size="medium">历史</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="height: 76vh;overflow-y: auto;" v-infinite-scroll="page" infinite-scroll-distance="10" :infinite-scroll-disabled="isInfiniteScrollDisabled">
            <el-row>
                <el-col :span="6" v-for="(item,index) in tableData" :key="index" >
                    <el-card>
                        <img :src="item.picPath" class="image">
                        <div style="padding: 14px;">
                            <span class="productSpan">产品名称：{{ item.name }}</span>
                            <span class="productSpan">所属分类：{{ item.typeName }}</span>
                            <span class="productSpan">所属型号：{{ item.modelName }}</span>
                            <span class="productSpan">产品价格：{{ item.price }}</span>
                            <div class="bottom clearfix">
                                <el-button type="text" class="button" @click="procuctClick(item)">+</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!--    弹窗-->
        <el-dialog :title="formDialogTitle" :visible.sync="formDialogVisible" append-to-body :before-close="formClose">
            <el-table
                :data="dialogTableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="配置名称">
                </el-table-column>
                <el-table-column
                    prop="unitPrice"
                    label="单价">
                </el-table-column>
                <el-table-column
                    prop="discount"
                    label="折扣">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.discount" placeholder="请输入折扣[不输入则认为不打折]" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="数量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.num" placeholder="请输入数量" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click='formSave' type="primary">保存</el-button>
                <el-button @click="formClose">关闭</el-button>
            </template>
        </el-dialog>
        <!--    历史弹窗-->
        <el-dialog title="历史数据" :visible.sync="historyDialogVisible" append-to-body :before-close="historyClose">
            <el-table
                :data="allHistoryTableData"
                border
                style="width: 100%;max-height: 50vh;overflow-y: auto;">
                <el-table-column
                    prop="name"
                    label="配置名称">
                </el-table-column>
                <el-table-column
                    prop="unitPrice"
                    label="单价">
                </el-table-column>
                <el-table-column
                    prop="discount"
                    label="折扣">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.discount" placeholder="请输入折扣" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="数量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.num" placeholder="请输入数量" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注" style="width:80%;" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            title="移除"
                            @click="removeLine(scope.row, scope.$index)"
                            style="color:#F56C6C;"
                        >移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click='historySave' type="primary">保存</el-button>
                <el-button @click="historyClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script src="./index.js">
</script>

<style scoped>
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
    font-size:42px;
  }
  .image {
    width: 100%;
    height:200px;
    display: block;
  }
  .productSpan{
    width: 100%;
    display: block;
    line-height:32px;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
  /deep/ .el-card{
    margin:30px;
  }
</style>
